<template>
  <div>
    <el-tabs v-model="returnReq.type" @tab-click="handleClick()" type="card">
      <el-tab-pane v-for="type in types" :key="type.EnumValue" :label="type.Description" :name="type.EnumValue">
        <div class="header">
          <span style="margin-left: 20px">关键字：</span>
          <el-input placeholder="请输入关键字" v-model="returnReq.keyword" style="width: 200px"></el-input>

          <span style="margin-left: 20px">回款日期：</span>
          <el-date-picker style="width: 140px" v-model="returnReq.accountDate1" value-format="yyyy-MM-dd HH:mm:ss"
            type="date" placeholder="选择起始日期"></el-date-picker>
          <span style="margin-left: 10px; margin-right: 10px">至</span>
          <el-date-picker style="width: 140px" v-model="returnReq.accountDate2" value-format="yyyy-MM-dd HH:mm:ss"
            type="date" placeholder="选择截至日期"></el-date-picker>

          <span style="margin-left: 20px">登记日期：</span>
          <el-date-picker style="width: 140px" v-model="returnReq.createDate1" value-format="yyyy-MM-dd HH:mm:ss"
            type="date" placeholder="选择起始日期"></el-date-picker>
          <span style="margin-left: 10px; margin-right: 10px">至</span>
          <el-date-picker style="width: 140px" v-model="returnReq.createDate2" value-format="yyyy-MM-dd HH:mm:ss"
            type="date" placeholder="选择截至日期"></el-date-picker>
          <el-button type="primary" style="margin-left: 10px" size="small" @click="getCompanyCaseBillReturns()">
            搜索
          </el-button>

          <el-button type="warning" style="margin-left: 10px" size="small" @click="outputReturnExcel"
            v-if="type.EnumValue == 2">
            导出回款报表
          </el-button>
        </div>
        <div class="main">
          <el-table style="overflow: auto" height="100%" :data="returnRes.Items" stripe border highlight-current-row>
            <el-table-column type="index" width="40"></el-table-column>
            <el-table-column label="回款金额" width="100">
              <template slot-scope="scope">{{ scope.row.CSBR_Fee }}元</template>
            </el-table-column>
            <el-table-column label="回款日期" width="160">
              <template slot-scope="scope">
                <div>{{ scope.row.CSBR_AccountTime | formatDate }}</div>
              </template>
            </el-table-column>
            <el-table-column label="发票信息">
              <template slot-scope="scope">
                <div v-if="scope.row.CSB_No">发票号码：{{ scope.row.CSB_No }}</div>
                <div v-if="scope.row.CSB_Fee">
                  价税合计：{{ scope.row.CSB_Fee }}
                </div>
                <div v-if="scope.row.CSB_WithOutTaxFee">
                  金额：{{ scope.row.CSB_WithOutTaxFee }}
                </div>
                <div v-if="scope.row.CSB_TaxFee">
                  税额：{{ scope.row.CSB_TaxFee }}
                </div>
                <div v-if="scope.row.CSB_BillDate">
                  开票日期：{{ scope.row.CSB_BillDate | formatDate }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="案件">
              <template slot-scope="scope">
                <div v-if="scope.row.CS_No">流水号：{{ scope.row.CS_No }}</div>
                <div v-if="scope.row.CS_DisplayName">
                  案件名：{{ scope.row.CS_DisplayName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="登记日期" width="120">
              <template slot-scope="scope">
                {{ scope.row.CSBR_CreateTime | formatDate }}
              </template>
            </el-table-column>
            <el-table-column label="购买方">
              <template slot-scope="scope">
                {{ scope.row.BuyCompanyName }}
                {{ scope.row.BuyEmployeeName }}
              </template>
            </el-table-column>
            <el-table-column label=" 备注">
              <template slot-scope="scope">
                {{ scope.row.CSBR_Remark }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <div v-if="type.EnumValue == 1">
                  <el-button @click="
                    newReturn.CSBR_BillID = scope.row.CSBR_BillID
                  newReturn.CSBR_ReturnID = scope.row.CSBR_ID
                  addReturnVis = true" type="text" size="small" icon="el-icon-coin" title="平台到账">
                    平台到账
                  </el-button>
                </div>
                <div>
                  <el-button @click="toCase(scope.row.CSB_CaseID)" type="text" size="small" icon="el-icon-search"
                    title="查看案件详情">
                    案件详情
                  </el-button>
                </div>
                <div>
                  <el-button @click="
                    curReturn = scope.row
                  imageVis = true
                    " type="text" size="small" icon="el-icon-search" title="查看扫描件">
                    扫描件
                  </el-button>
                </div>
                <div>
                  <el-button @click="deleteBillReturn(scope.row.CSBR_ID)" type="text" size="small" icon="el-icon-money"
                    title="删除">
                    删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 100%; height: 40px">
          <div style="display: flex; width: auto; float: right; align-items: center">
            <el-pagination layout="total,prev,pager,next,sizes" background :current-page.sync="returnReq.pageIndex"
              :total="returnRes.Total" :page-size="returnReq.pageSize" :page-sizes="[10, 15, 20]" @size-change="
                (val) => {
                  returnReq.pageSize = val
                  getCompanyCaseBillReturns()
                }
              " @current-change="getCompanyCaseBillReturns()"></el-pagination>
            <div style="margin-top: 15px 15px 0 15px">共回款{{ returnSum }}元</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="imageVis" width="60%" :modal-append-to-body="false" center>
      <el-image v-if="curReturn && curReturn.FL_SrcPath" :src="fileURL + curReturn.FL_SrcPath" fit="fill"
        :preview-src-list="[fileURL + curReturn.FL_SrcPath]"></el-image>
      <div v-else>未上传发票</div>
    </el-dialog>

    <el-dialog title="平台到账" :visible.sync="addReturnVis" width="500px" :modal-append-to-body="false" center>
      <el-form label-width="100px" label-position="left" v-if="newReturn">
        <el-form-item label="到账日期">
          <el-date-picker align="right" v-model="newReturn.CSBR_AccountTime" placeholder="请选择到账日期"
            value-format="yyyy-MM-dd HH:mm:ss" type="date"></el-date-picker>
        </el-form-item>
        <el-form-item label="金额(元)">
          <div style="display: flex">
            <el-input-number style="flex: 1" v-model="newReturn.CSBR_Fee" :precision="2"></el-input-number>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="newReturn.CSBR_Remark" placeholder="请输入备注" rows="3" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addBillReturn">保存</el-button>
          <el-button type="text" @click="addReturnVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {
  addBillReturn,
} from '@/api/finance/caseBillReturn'
import {
  getCaseBillReturnTypes,
  getCompanyCaseBillReturns,
  deleteBillReturn,
} from '@/api/finance/caseBillReturn'
import { baseURL, fileRoot, tokenName, empIdName } from '@/config'
import axios from 'axios'

export default {
  data: function () {
    return {
      types: [],
      returnReq: {
        pageIndex: 1,
        pageSize: 10,
        keyword: null,
        accountDate1: null,
        accountDate2: null,
        createDate1: null,
        createDate2: null,
        type: 1,
      },
      returnRes: {
        Items: [],
        Total: 0,
      },
      returnSum: null,
      curReturn: {},
      newReturn: {},
      fileURL: baseURL + fileRoot,
      addReturnVis: false,
      imageVis: false,
    }
  },
  computed: {
    ...mapGetters({
      curEmp: 'user/curEmp',
    }),
  },
  methods: {
    handleClick() {
      this.getCompanyCaseBillReturns()
    },
    getCaseBillReturnTypes() {
      getCaseBillReturnTypes().then(({ data }) => {
        this.types = data
      })
    },
    getCompanyCaseBillReturns() {
      getCompanyCaseBillReturns(this.returnReq).then(({ data }) => {
        this.returnRes = data.page
        this.returnSum = data.sum
      })
    },
    toForm: function (formId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { formId },
      })
    },
    toCase: function (caseId) {
      this.$router.push({
        name: 'caseInfoPage',
        query: { caseId },
      })
    },
    addBillReturn: function () {
      // 平台到账
      this.newReturn.CSBR_Type = 2
      addBillReturn(this.newReturn).then(() => {
        this.addReturnVis = false
        this.returnReq.type = 2
        this.getCompanyCaseBillReturns()
      })
    },
    deleteBillReturn(id) {
      this.$confirm(`是否删除该回款记录？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteBillReturn(id).then(() => {
          this.getCompanyCaseBillReturns()
        })
      })
    },
    outputReturnExcel() {
      if (
        this.returnReq.keyword == null &&
        this.returnReq.createDate1 == null &&
        this.returnReq.createDate2 == null &&
        this.returnReq.accountDate1 == null &&
        this.returnReq.accountDate2 == null
      ) {
        this.$message('请选择导出日期')
        return
      }
      var config = {
        baseURL,
        headers: {},
        responseType: 'blob',
      }
      config.headers[tokenName] = this.$store.getters['user/accessToken']
      config.headers[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
      axios
        .post(
          '/api/Finance/CaseBillReturnStas/OutputReturnCaseBillExcel',
          this.returnReq,
          config
        )
        .then((response) => {
          var blob = new Blob([response.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = '回款报表.xls' //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
        .catch((error) => {
          console.log('response: ', error)
        })
    },
  },
  created: function () {
    var data = this.$store.getters['pagination/getRoutePage'](this.$route)
    Object.assign(this.$data, data)
    this.getCaseBillReturnTypes()
    this.getCompanyCaseBillReturns()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('pagination/setRoutePage', {
      route: this.$route,
      pageData: this.$data,
    })
    next()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: calc(75vh - 60px);
  overflow: auto;
}
</style>
